<template>
    <div class="homeBottom">
        <div class="product">
            <div class="title">
                <h2>推荐产品</h2>
                <i></i>
            </div>
            <ul>
                <li v-for="item in products" :key="item.id">
                    <router-link to="">
                        <h3 v-text="item.title"></h3>
                        <p class="rate">{{ item.data }}<font>%</font><span v-if="item.percent !== ''">+{{ item.percent }}%</span></p>
                        <h4>预期年化收益</h4>
                        <p class="days">{{ item.days }}<font>天</font></p>

                        <button v-if="item.sellState === 0" class="soldOut">已售罄</button>
                        <button v-else-if="item.sellState === 1" class="onSale">立即投资</button>
                        <button v-else class="countDown"><CountDownTime :endTime="item.endTime" :startTime="nowTime" :endText="btnText"></CountDownTime></button>

                        <p class="amount"><i></i>起投金额 100.00元</p>
                        <p class="amount"><i></i>剩余可投 {{ item.leftAmount.toFixed(2) }}元</p>

                        <!-- 右上角标签 -->
                        <div v-if="item.sellType === 0"></div>
                        <div v-else-if="item.sellType === 1" class="triangle triangleNewUser"></div>
                        <div v-else-if="item.sellType === 2" class="triangle triangleActivity"></div>
                        <div v-else class="triangle triangleForSell"></div>
                    </router-link>
                </li>
            </ul>
            <div><router-link class="moreProducts" to="/list">查看更多理财产品</router-link></div>
        </div>
        <div class="download">
            <div class="downloadContent">
                <h2>钱内助</h2>
                <i class="line"></i>
                <h3>您的理财贤内助</h3>
                <ul>
                    <li><i class="iconfont icon-ios"></i><span>苹果版</span></li>
                    <li><i class="iconfont icon-android"></i><span>安卓版</span></li>
                </ul>
                <div class="QRCode">
                    <img src="../../assets/images/QRCode.png" alt="">
                </div>
            </div>
        </div>
        <div class="message">
            <div class="title">
                <h2>最新动态</h2>
                <i></i>
            </div>
            <div class="messageContent">
                <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                    <el-tab-pane label="公司动态" name="first">
                        <div class="clearFix">
                            <div class="fl messageImg">
                                <img :src="companyMsgImg" alt="">
                            </div>
                            <div class="fr">
                                <ul>
                                    <li v-for="message in companyMsg" :key="message.id">
                                        <router-link to="">
                                            <h2>
                                                <font v-text="message.day"></font>
                                                <p v-text="message.date"></p>
                                            </h2>
                                            <h3>
                                                <font v-text="message.title"></font>
                                                <p v-text="message.content"></p>
                                            </h3>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="媒体报道" name="second">
                        <div class="clearFix">
                            <div class="fl messageImg">
                                <img :src="reportMsgImg" alt="">
                            </div>
                            <div class="fr">
                                <ul>
                                    <li v-for="message in reportMsg" :key="message.id">
                                        <router-link to="">
                                            <h2>
                                                <font v-text="message.day"></font>
                                                <p v-text="message.date"></p>
                                            </h2>
                                            <h3>
                                                <font v-text="message.title"></font>
                                                <p v-text="message.content"></p>
                                            </h3>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <router-link to="/state" class="more" v-if="activeName2 === 'first'">更多</router-link>
                <router-link to="/media" class="more" v-if="activeName2 === 'second'">更多</router-link>                
            </div>
        </div>
        <div class="partner">
            <div class="title">
                <h2>合作伙伴</h2>
                <i></i>
            </div>
            <ul>
                <li v-for="partner in partners" :key="partner.id">
                    <router-link to=""><img :src="partner.src" alt=""></router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    // sellState: 0 已售罄, 1 立即投资, 2 倒计时
    // sellType: 0 无, 1 新手, 2 活动, 3 预售
    import CountDownTime from '../common/CountTime.vue';
    export default{
        data(){
            return  {
                products: [
                    {
                        id: 1,
                        title: '体验金专享标',
                        data: '12.80',
                        percent: '8.4',
                        days: 23,
                        sellState: 0,
                        sellType: 0,
                        leftAmount: 1000000.00
                    },
                    {
                        id: 2,                        
                        title: '垫贷宝NO.12312',
                        data: '7.80',
                        percent: '',
                        days: 30,
                        sellState: 1,
                        sellType: 1,
                        leftAmount: 1000000.00
                    },
                    {
                        id: 3,                        
                        title: '车融宝NO.25689',
                        data: '10.40',
                        percent: '',
                        days: 180,
                        sellState: 1,
                        sellType: 2,
                        leftAmount: 1000000.00
                    },
                    {
                        id: 4,                        
                        title: '体验金专享标',
                        data: '4.80',
                        percent: '',
                        days: 60,
                        sellState: 2,
                        sellType: 3,
                        leftAmount: 1000000.00,
                        endTime: '2018/1/10 00:00:00'
                    }
                ],
                activeName2: 'first',
                partners: [
                    { src: require('../../assets/images/hengfeng.png') },
                    { src: require('../../assets/images/lianlian.png') },
                    { src: require('../../assets/images/ancun.png') },
                    { src: require('../../assets/images/qiniu.png') },
                    { src: require('../../assets/images/aliyun.png') }                    
                ],
                companyMsg: [
                    {
                        id: 1,
                        day: '27',
                        date: '2017-11',
                        title: '钱内助正式签署银行存管协议，落实监管坚守合规',
                        content: '钱内助一直在探索更稳妥的合作模式钱内助一直在探索更稳妥的合作模式钱内助一直在探索更稳妥的合作模式钱内助一直在探索更稳妥的合作模式钱内助一直在探索更稳妥的合作模式钱内助一直在探索更稳妥的合作模式，探索更安全的投资提现渠道，同时紧随行业政策步伐。在《暂行办法》和《指引》颁布以来，钱内助积极响应监管要求'
                    },
                    {
                        id: 2,
                        day: '26',
                        date: '2017-11',
                        title: '河北省廊坊市固安县代表团一行莅临钱内助参观指导',
                        content: '中国人民银行固安县支行行长时雪壮与固安县委组织部常务副部长冉祥全等一行莅临钱参观指导中国人民银行固安县支行行长时雪壮与固安县委组织部常务副部长冉祥全等一行莅临钱参观指导中国人民银行固安县支行行长时雪壮与固安县委组织部常务副部长冉祥全等一行莅临钱参观指导中国人民银行固安县支行行长时雪壮与固安县委组织部常务副部长冉祥全等一行莅临钱参观指导中国人民银行固安县支行行长时雪壮与固安县委组织部常务副部长冉祥全等一行莅临钱参观指导中国人民银行固安县支行行长时雪壮与固安县委组织部常务副部长冉祥全等一行莅临钱参观指导'
                    },
                    {
                        id: 3,
                        day: '25',
                        date: '2017-11',
                        title: '北京·钓鱼台传钱内助捷报！',
                        content: '钱内助一直在探索更稳妥的合作模式，探索更安全的投资提现渠道，同时紧随行业政策步伐。在《暂行办法》'
                    },
                    {
                        id: 4,
                        day: '24',
                        date: '2017-11',
                        title: '钱内助正式签署银行存管协议，落实监管坚守合规银行存管协议，落实监管坚守合规银行存管协议，落实监管坚守合规银行存管协议，落实监管坚守合规银行存管协议，落实监管坚守合规',
                        content: '钱内助一直在探索更稳妥的合作模式，探索更安全的投资提现渠道，同时紧随行业政策步伐。在《暂行办法》和《指引》颁布以来，钱内助积极响应监管要求'
                    }
                ],
                reportMsg: [
                    {
                        id: 1,
                        day: '11',
                        date: '2017-11',
                        title: '钱内助',
                        content: '钱内助一直在探索更稳妥的合作模式，探索更安全的投资提现渠道，同时紧随行业政策步伐。在《暂行办法》和《指引》颁布以来，钱内助积极响应监管要求'
                    }
                ],
                // 公司动态图片
                companyMsgImg: require('../../assets/images/companymsgimg.png'),
                // 媒体报道图片
                reportMsgImg: require('../../assets/images/companymsgimg.png'),
                nowTime: new Date(),
                btnText: '立即抢购'
            }
        },
        methods: {
            handleClick(tab, event){

            }
        },
        components:{
            CountDownTime
        }
    }
</script>

<style lang="scss" scoped>
    .homeBottom{
        min-width: 1200px;
        .title{
            h2{
                text-align: center;font-size: 42px;font-weight: normal;
            }
            i{
                display: block;width: 60px;height: 4px;background: #e95412;margin: 0 auto;
            }
        }
    }
    .product{
        background: url(../../assets/images/productbg.png) no-repeat center;padding: 143px 0 169px 0;
        ul{
            width: 1200px;margin: 60px auto 0 auto;
        }
        li{
            a{
                display: block;width: 281px;height: 420px;padding: 50px 0 0 0;
            }
            &:hover{
                box-shadow: 0 0 20px rgba($color: #ff8149, $alpha: 0.5);
            }
            &:not(:first-child){
                margin-left: 22px;
            }
            display: inline-block;width: 281px;height: 420px;background: #ffffff;position: relative;
            h3{
                font-size: 18px;text-align: center;color: #333333;
            }
            .rate{
                font-size: 40px;color: #e95412;text-align: center;margin-top: 35px;
                font, span{
                    font-size: 26px;
                }
            }
            h4{
                color: #a9a9a9;text-align: center;font-weight: normal;
            }
            .days{
                font-size: 32px;text-align: center;margin-top: 25px;color: #333333;
                font{
                    font-size: 20px;
                }
            }
            button{
                display: block;width: 186px;height: 40px;text-align: center;color: #ffffff;border-radius: 4px;font-size: 16px;margin: 30px auto 25px auto;border: none;outline: none;
            }
            .soldOut{
                background: #e6e6e6;
            }
            .onSale{
                background: #ff6235;
            }
            .countDown{
                background: #ffb525;
            }
            .triangle{
                background: url(../../assets/images/product-triangle.png) no-repeat;width: 74px;height: 74px;position: absolute;top: 0;right: 0;
            }
            .triangleNewUser{
                background-position: 0 0;
            }
            .triangleActivity{
                background-position: -74px 0;
            }
            .triangleForSell{
                background-position: -148px 0;
            }
        }
        .moreProducts{
            display: block;width: 168px;height: 38px;border: 2px solid #ffffff;border-radius: 30px;line-height: 38px;text-align: center;color: #ffffff;margin: 65px auto 0 auto;
            &:hover{
                background: #ff6235;border: 2px solid #ff6235;
            }
        }
        .amount{
            color: #999999;margin-left: 48px;
            i{
                display: inline-block;width: 4px;height: 4px;background: #e4e4e4;margin-right: 8px;position: relative;bottom: 3px;
            }
        }
    }
    .download{
        background: url(../../assets/images/downloadbg.png) no-repeat center;padding: 250px 0 160px 0;
    }
    .downloadContent{
        width: 1200px;margin: 0 auto;
        h2{
            font-size: 65px;font-weight: normal;color: #ffffff;
        }
        .line{
            display: block;width: 120px;height: 4px;background: #ffffff;margin: 20px 0;
        }
        h3{
            font-size: 43px;font-weight: normal;color: #ffffff;margin-bottom: 50px;
        }
        .iconfont{
            color: #ffffff;font-size: 22px;
        }
        li{
            display: inline-block;width: 174px;height: 48px;border: 2px solid #ffffff;border-radius: 2px;font-size: 18px;color: #ffffff;line-height: 48px;text-align: center;cursor: pointer;
            &:nth-child(2){
                margin-left: 20px;
            }
            i{
                margin-right: 17px;
            }
            span{
                position: relative;bottom: 2px;
            }
        }
        .QRCode{
            width: 216px;height: 216px;background: #ffffff;margin-top: 50px;
            img{
                margin: 10px;
            }
        }
    }
    .message{
        padding: 150px 0;
        .title{
            margin-bottom: 22px;
        } 
    }
    .messageContent{
        width: 1200px;margin: 0 auto;position: relative;
        .more{
            &:hover{
                background: #ff6235;border: 1px solid #ff6235;color: #ffffff;
            }
            display: block;position: absolute;top: 22px;right: 0;width: 82px;height: 26px;line-height: 26px;border: 1px solid #666666;color: #666666;text-align: center;border-radius: 20px;
        }
        li{
            width: 730px;border: 1px solid #ffffff;
            a{
                display: block;padding: 0 0 10px 20px;
            }
            &:not(:first-child){
                margin: 10px 0 0 0;
            }
            h2, h3{
                display: inline-block;color: #333333;
            }
            h2{
                font-size: 60px;font-weight: 300;
                &:hover{
                    color: #ff6235;
                    p{
                        color: #ff6235;
                    }
                }
                p{
                    font-size: 16px;color: #a1a1a1;
                }
            }
            h3{
                font-size: 17px;width: 590px;font-weight: normal;margin: 0 0 0 40px;line-height: 33px;position: relative;
                &:hover{
                    color: #ff6235;
                }
                font{
                    display: block;
                    height: 30px;
                    overflow: hidden;
                }
                p{
                    overflow: hidden;color: #a1a1a1;font-size: 15px;height: 59px;
                }
            }
        }
    }
    .messageImg{
        height: 481px;
        width: 411px;
        overflow: hidden;
    }
    .partner{
        background: url(../../assets/images/partnerbg.png) no-repeat center;padding: 135px 0 210px 0;
        ul{
            width: 1189px;margin: 85px auto 0 auto;
        }
        li{
            display: inline-block;
            &:not(:first-child){
                margin-left: 76px;
            }
        }
    }
</style>

<style lang="scss">
    .homeBottom{
        .el-tabs--card>.el-tabs__header, .el-tabs--card>.el-tabs__header .el-tabs__nav, .el-tabs--card>.el-tabs__header .el-tabs__item{
            border: none;
        }
        .el-tabs__item.is-active{
            color: #ffffff;background: #e95412;
        }
        .el-tabs__item{
            background: #666666;color: #ffffff;width: 128px;height: 46px;line-height: 46px;text-align: center;
        }
        .el-tabs__item:hover{
            color: #ffffff;
        }
        .el-tabs__header{
            margin: 0 0 50px 0;
        }
    }
    .product .orangeBg{
        display: block;
        width: 186px;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        position: relative;
        top: -1px;
        left: -6px;
    }
</style>
